<template>
  <div class="home">
    <RouterView />
    <van-tabbar v-model="active" active-color="#c67120" inactive-color="black">
      <van-tabbar-item to="/home/index" name='/home/index'>
        <span>首页</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/sy1.png"/>
          <img v-else src="@/assets/sy.png"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item  to="/home/serve"  name='/home/serve'>
        <span>服务</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/gn1.png"/>
          <img v-else src="@/assets/gn.png"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/date" name='/home/date'>
        <span>日历</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/rl1.png"/>
          <img v-else src="@/assets/rl.png"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/home/me" name='/home/me'>
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="@/assets/me1.png"/>
          <img v-else src="@/assets/me.png"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { RouterView } from 'vue-router';

export default {
    data() {
        return {
            active: this.$route.path
        };
    },
    components: { RouterView },
}
</script>
